// Mobile-first media query helper
@mixin media($bp) {
  @media screen and (min-width: #{$bp}) {
    @content;
  }
}

// Screen reader only helper
@mixin sr-only() {
  position: absolute;
  left: -999em;
}

.usa-sr-only {
  @include sr-only();
}

// Aria hidden helper
@mixin accessibly-hidden() {
  &[aria-hidden=true] {
    display: none;
  }
}

// Unstyled list helper

@mixin unstyled-list() {
  @include margin(0 null);
  list-style-type: none;
  padding-left: 0;

  > li {
    margin-bottom: 0;
  }
}

// Content size helpers
@mixin allow-layout-classes {
  @include margin(null auto);

  &.width-one-half {
    @include media($medium-screen) {
      width: 50%;
    }
  }

  &.width-one-third {
    @include media($medium-screen) {
      width: 33%;
    }
  }

  &.width-two-thirds {
    @include media($medium-screen) {
      width: 67%;
    }
  }

  &.width-one-fourth {
    @include media($medium-screen) {
      width: 25%;
    }
  }

  &.width-three-fourths {
    @include media($medium-screen) {
      width: 75%;
    }
  }

  &.align-left {
    @include media($medium-screen) {
      float: left;
      margin-right: 2em;
      margin-top: 0.5em;
    }
  }

  &.align-right {
    @include media($medium-screen) {
      float: right;
      margin-left: 2em;
      margin-top: 0.5em;
    }
  }
}
